<script>
// 单个应用预览
import PreviewAppContent from './PreviewAppContent';

export default {
  name: 'PreviewApp',
  components: { PreviewAppContent },
  data() {
    return {
      appName: '未命名图表',
    };
  },
  computed: {
    appData() {
      return this.$store.state.app.appData;
    },
  },
  mounted() {
    this.appName = this.appData.name;
  },
  methods: {
    closePreView() {
      this.$router.push('/workspace/' + this.appData.id);
      // 显示工具条
      this.controlTools(true);
    },
    controlTools(status) {
      this.$nextTick(() => {
        this.$events.emit('on-hiddenTools', status);
      });
    },
  },
};
</script>

<template>
  <div class="layout">
    <Layout>
      <Header>
        <Row>
          <Col span="8">
          <h1>{{ appName }}</h1>
          </Col>
          <Col span="16">
          <span @click="closePreView">退出预览</span>
          </Col>
        </Row>
      </Header>
      <Content>
        <PreviewAppContent></PreviewAppContent>
      </Content>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.layout {
  background: #e8ebed;
  position: relative;
  overflow: hidden;

  .k-layout-header {
    width: '100%';
    background: none;

    .k-row {
      .k-col:last-child {
        span {
          float: right;
          cursor: pointer;
        }
      }
    }
  }

  /deep/ .k-layout-content {
    height: calc(~'100vh - 64px');
    overflow-y: auto;
  }
}
</style>
